<template>
  <!-- 结算弹窗 -->
  <div class="t_settlement_main">
    <div class="t_main_header">
      <lay-card v-for="pay in payMthods" :key="pay.id" @click="selectedPayMethod(pay)">
        <div class="t_main_header_item_icon">
          <svg-icon :name="pay.icon" :size="'1.5rem'"></svg-icon>
        </div>
        <div>{{ pay.name }}</div>
      </lay-card>
    </div>
    <div class="t_main_content header">
      <!--左侧支付列表-->
      <div class="t_main_content_left">
        <div class="left_header">
          <lay-row>
            <lay-col md="10">付款方式</lay-col>
            <lay-col md="4">
              <div class="layui-anim layui-anim-rotate" @click="toPayLirefresh">
                <lay-icon color="#16b777" type="layui-icon-refresh"></lay-icon>
              </div>
            </lay-col>
            <lay-col md="10">付款金额</lay-col>
          </lay-row>
        </div>
        <!-- 已支付的支付列表 -->
        <div class="left_content">
          <lay-row v-for="item in PayOrderLi" :key="item.id" @click="toPayID(item)">
            <lay-col md="14">
              <svg-icon :name="item.icon" :size="'1rem'"></svg-icon>
              <span style="margin-left: 5px">{{ item.name2 }}</span>
            </lay-col>
            <lay-col md="10" style="justify-content: right">
              <span style="margin-right: 5px">{{ item.amount }}</span><svg-icon :name="'rmb'"
                :size="'1rem'"></svg-icon></lay-col>
          </lay-row>
        </div>
      </div>

      <!--右侧支付按钮-->
      <div class="t_main_content_right">
        <div class="right_header">
          <lay-row>
            <lay-col md="9">
              <div class="t_title">应收款:</div>
              <div class="t_content" style="color: red">
                {{ PAY_DB.total_price_new }}
              </div>
            </lay-col>
            <lay-col md="9">
              <div class="t_title">已收款:</div>
              <div class="t_content" style="color: #4dd44d">
                {{ PAY_DB.received }}
              </div>
            </lay-col>
            <lay-col md="6">
              <div class="t_title" style="width: 50px;">原价:</div>
              <div class="t_content" style="color: red;width: 80px;">
                {{ PAY_DB.total_price }}
              </div>
            </lay-col>
          </lay-row>
          <lay-row>
            <lay-col md="9">
              <div class="t_title">待收款:</div>
              <div class="t_content" style="color: red">
                {{ PAY_DB.pendingPayment }}
                <!-- {{ pendingPaymentComp }} -->
              </div>
            </lay-col>
            <lay-col md="9">
              <div class="t_title">已减免:</div>
              <div class="t_content" style="color: red; width: 80px;">
                {{ PAY_DB.price_reduce_val }}
              </div>
              <span style="color:#616161; font-size: 18px;margin-left: 4px ;font-weight: 600;">
                {{ PAY_DB.price_reduce }}</span>
            </lay-col>
            <lay-col md="6">
              <div class="t_title" style="width: 50px;">折扣:</div>
              <div class="t_content" style="color: red; width: 80px;">
                {{ PAY_DB.total_discount }}
              </div>
            </lay-col>

          </lay-row>
          <lay-row>
            <lay-col md="24">
              <div class="t_button">
                减免:
                <lay-button size="sm" @click="price_reduce_Window_c('抹零')">抹零</lay-button>
                <lay-button size="sm" @click="price_reduce_Window_c('直减')">直减</lay-button>
                <lay-button size="sm" @click="price_reduce_Window_c('优惠')">优惠</lay-button>
                <lay-button size="sm" @click="price_reduce_Window_c('打折')">打折</lay-button>
                <lay-button size="sm" @click="price_reduce_Window_c('活动')">活动</lay-button>
                <lay-button size="sm" @click="price_reduce_Window_c('议价')">议价</lay-button>
                <lay-button size="sm" @click="price_reduce_Window_c('免单')">免单</lay-button>
                <lay-button size="sm" @click="price_reduce_Window_c('其它')">其它</lay-button>

              </div>
            </lay-col>

          </lay-row>

        </div>
        <!-- 输入金额块小键盘 -->
        <div class="right_content">
          <window_pay_cash ref="Ref_windowPayCash" :PAY_DB="PAY_DB" :order_db="props.order_db"
            @windowClose_1="windowClose" @pay_res="pay_res"></window_pay_cash>
        </div>
      </div>
    </div>

  </div>

  <div>
    <!-- 支付方式弹窗 -->
    <lay-layer v-model="payMethodLayer" :shadeClose="false" :shadeOpacity="0.5" :area="['400px', '400px']"
      :title="'结算类型：' + payMethodTitle.name" :closeBtn="false" :success="layer_pay_success"
      :beforeClose="layer_pay_beforeClose">
      <div class="t_pay_main">
        <div class="t_pay_main_header">
          <lay-row>
            <lay-col md="6">应付金额：</lay-col>
            <lay-col md="12">
              <lay-input v-model="payAmount" @focus="input_is_c('payAmount')"></lay-input>
            </lay-col>
          </lay-row>
          <lay-row>
            <lay-col md="6">付款码：</lay-col>
            <lay-col md="12">
              <lay-input v-model="paymentCode" ref="paymentCode_Ref" @focus="input_is_c('paymentCode')"></lay-input>
            </lay-col>
          </lay-row>
        </div>

        <div class="t_pay_main_content">
          <div class="keyboard-num">
            <div class="keyboard-num-item" v-for="item in btnList" :key="item.key">
              <lay-button type="default" @click="layer_pay_Btn(item)">{{ item.value }}</lay-button>
            </div>
          </div>
          <div class="keyboard-option">
            <div class="keyboard-option-item">
              <lay-button type="warm" @click="layer_pay_Btn({ key: 'back' })">退格</lay-button>
            </div>
            <div class="keyboard-option-item">
              <lay-button type="danger" @click="layer_pay_exit">退出</lay-button>
            </div>
            <div class="keyboard-option-item">
              <lay-button type="primary" @click="layer_pay_pay">确定</lay-button>
            </div>
          </div>
        </div>
      </div>
    </lay-layer>
  </div>


  <!--支付订单单条弹窗-->
  <lay-layer v-model="PayID_Window" :maxmin="true" :shadeClose="false" :area="['600px', '400px']"
    :btn="PayID_Window_db_btn" :title="'支付详情：' + PayID_Window_db.name">
    <lay-tab v-model="PayID_Window_tab" @change="PayID_Window_change">
      <lay-tab-item title="单头信息" id="order_db">
        <div style="padding:0px 10px 0px 10px">
          <lay-row space="6">
            <lay-col md="12">
              <lay-input v-model="PayID_Window_db.order_dbid">
                <template #prepend="{ disabled }">销售单号</template>
              </lay-input>
            </lay-col>

            <lay-col md="12">
              <lay-input v-model="PayID_Window_db.state_2">
                <template #prepend="{ disabled }">单据状态</template>
              </lay-input>
            </lay-col>

            <lay-col md="12">
              <lay-input v-model="PayID_Window_db.client_sn">
                <template #prepend="{ disabled }">支付单号</template>
              </lay-input>
            </lay-col>
            <lay-col md="12"><lay-input v-model="PayID_Window_db.time_new">
                <template #prepend="{ disabled }">创建时间</template>
              </lay-input>
            </lay-col>
            <lay-col md="12"><lay-input v-model="PayID_Window_db.pay_sn">
                <template #prepend="{ disabled }">
                  <lay-tooltip content="【三方单号】只有云支付才会生成">
                    <i>三方单号</i>
                  </lay-tooltip>
                </template>
              </lay-input>
            </lay-col>


            <lay-col md="12">
              <lay-input v-model="PayID_Window_db.time_up">
                <template #prepend="{ disabled }">更新时间</template>
              </lay-input>
            </lay-col>
            <lay-col md="24">
              <lay-input v-model="PayID_Window_db.remark">
                <template #prepend="{ disabled }">备注</template>
              </lay-input>
            </lay-col>


          </lay-row>
        </div>
      </lay-tab-item>
      <lay-tab-item title="币种信息" id="order_db_goods">
        <div style="padding:0px 10px 0px 10px">
          <lay-row space="6">
            <lay-col md="8">
              <lay-input v-model="PayID_Window_db.total_amount">
                <template #prepend="{ disabled }">原始金额</template>
              </lay-input>
            </lay-col>
            <lay-col md="8"> <lay-input v-model="PayID_Window_db.net_amount">
                <template #prepend="{ disabled }">在帐金额</template>
              </lay-input>
            </lay-col>
            <lay-col md="8"> <lay-input v-model="PayID_Window_db.pay_currency_name">
                <template #prepend="{ disabled }">币种名称</template>
              </lay-input>
            </lay-col>
            <lay-col md="8"> <lay-input v-model="PayID_Window_db.pay_currency">
                <template #prepend="{ disabled }">支付币种</template>
              </lay-input>
            </lay-col>
            <lay-col md="8"><lay-input v-model="PayID_Window_db.exchange_rate">
                <template #prepend="{ disabled }">货币汇率</template>
              </lay-input>
            </lay-col>
            <lay-col md="8"> <lay-input v-model="PayID_Window_db.pay_currency_ico">
                <template #prepend="{ disabled }">币种图标</template>
              </lay-input>
            </lay-col>
          </lay-row>
        </div>

      </lay-tab-item>
      <lay-tab-item title="退款操作" id="refund_pay">
        <div style="padding:0px 10px 0px 10px">
          <lay-row space="6">
            <lay-col md="12">
              <lay-input v-model="PayID_Window_db.total_amount" disabled>
                <template #prepend="{ disabled }">原始金额</template>
              </lay-input>
            </lay-col>
            <lay-col md="12">
              <lay-input v-model="PayID_Window_db.net_amount" disabled>
                <template #prepend="{ disabled }">在帐金额</template>
              </lay-input>
            </lay-col>
            <lay-col md="12">
              <lay-input v-model="PayID_Window_db.name" disabled>
                <template #prepend="{ disabled }">退款币种</template>
              </lay-input>
            </lay-col>
            <lay-line></lay-line>
            <lay-col md="12">
              <lay-input v-model.number="Refund_db.amount" type="number"
                :disabled="PayID_Window_db.payway == '8' ? true : false">
                <template #prepend="{ disabled }">
                  <lay-tooltip content="【退款金额】的限额是【在帐金额】">
                    <i>退款金额</i>
                  </lay-tooltip>
                </template>
                <template #append="{ disabled }" v-if="PayID_Window_db.payway == '9'">
                  <lay-icon type="layui-icon-close" @click="Refund_db_amount_NULL(PayID_Window_db.payway)"></lay-icon>
                </template>
              </lay-input>
            </lay-col>
            <lay-col md="12">
              <lay-button type="danger" @click="pay_refund_go(PayID_Window_db.payway)">申请退款</lay-button>
            </lay-col>
            <lay-col md="24">
              <i>提示：退款成功后，金额将原路返还。</i>
            </lay-col>
          </lay-row>

        </div>
      </lay-tab-item>
      <lay-tab-item title="支付回调" id="pay_db">
        <div style="padding:0px 10px 0px 10px">
          {{ PayID_Window_db.pay_db }}
        </div>
      </lay-tab-item>
      <lay-tab-item title="查询回调" id="pay_api_notify_query">
        <div style="padding:0px 10px 0px 10px">
          {{ PayID_Window_db.pay_api_notify_query }}
        </div>
      </lay-tab-item>
      <lay-tab-item title="其它信息" id="pay_other">
        <div style="padding:0px 10px 0px 10px">
          <lay-row space="6">

            <lay-col md="8">
              <lay-input v-model="PayID_Window_db.x_del">
                <template #prepend="{ disabled }">虚拟删除</template>
              </lay-input>
            </lay-col>
            <lay-col md="8"><lay-input v-model="PayID_Window_db.payway">
                <template #prepend="{ disabled }">支付方式</template>
              </lay-input>
            </lay-col>

          </lay-row>
        </div>
      </lay-tab-item>
    </lay-tab>
  </lay-layer>

  <!-- 退款编号弹窗 -->
  <lay-layer v-model="pay_refund_Window" :closeBtn="false" :shadeClose="true" :shadeOpacity="0.5"
    :area="['auto', 'auto']" :title="false">
    <div style="height: auto;padding: 10px">
      <lay-row>
        <lay-col md="16">
          <div style="">
            <lay-input v-model="Refund_db.refund_sn">
              <template #prepend="{ disabled }">
                <lay-tooltip content="【退款编号】填写【三方单号】的值。注意：为了防止过失退款，最佳操作是客人出示手机订单上的条码给收银员扫码录入。">
                  <i>退款编号</i>
                </lay-tooltip>

              </template>
              <template #append="{ disabled }">
                <lay-icon type="layui-icon-close" @click="Refund_db_refund_sn_NULL"></lay-icon>
              </template>
            </lay-input>
          </div>
        </lay-col>
        <lay-col md="8">
          <div style="text-align: right;">
            <lay-button type="danger" @click="pay_refund_Window_go">退款</lay-button>
            <lay-button @click="pay_refund_Window_exit">关闭</lay-button>
          </div>
        </lay-col>
      </lay-row>
    </div>
  </lay-layer>


  <!-- 减免金额弹窗 -->
  <lay-layer v-model="price_reduce_Window" :closeBtn="false" :shadeClose="true" :shadeOpacity="0.5"
    :area="['400px', '400px']" :title="false">
    <div class="t_pay_main">

      <div style="height: 120px;padding: 10px;">
        <lay-row space="5">
          <lay-col md="12">
            <lay-input v-model="PAY_DB.total_price" :disabled="true">
              <!-- [整单总价_原始价] -->
              <template #prepend="{ disabled }">原始总价</template>
            </lay-input>
          </lay-col>
          <lay-col md="12">
            <lay-input v-model="PAY_DB.total_price_new" :disabled="true">
              <!-- [整单总价_实收价] -->
              <template #prepend="{ disabled }">实收总价</template>
            </lay-input>
          </lay-col>
        </lay-row>
        <lay-row space="5">
          <lay-col md="12">
            <lay-input v-model="PAY_DB.price_reduce_difference" :disabled="true">
              <!-- [原始价与实收价的差] -->
              <template #prepend="{ disabled }">实收价差</template>
            </lay-input>
          </lay-col>
          <lay-col md="12">
            <lay-input v-model="PAY_DB.price_reduce_set" :disabled="true">
              <!-- [金额减免原因] -->
              <template #prepend="{ disabled }">减免原因</template>
            </lay-input>
          </lay-col>
        </lay-row>
        <lay-row space="5">
          <lay-col md="12">
            <lay-input v-model="PAY_DB.price_reduce_val" :disabled="true">
              <!-- [减免金额] -->
              <template #prepend="{ disabled }">已减免金额</template>
            </lay-input>
          </lay-col>
          <lay-col md="12">
            <lay-input v-model="PAY_DB.price_reduce_val_set" :disabled="false">
              <!-- [新设置减免金额] -->
              <template #prepend="{ disabled }">新减免金额</template>
            </lay-input>
          </lay-col>
        </lay-row>
      </div>

      <div class="t_pay_main_content">
        <div class="keyboard-num">
          <div class="keyboard-num-item" v-for="item in btnList" :key="item.key">
            <lay-button type="default" @click="price_reduce_Window_Btn(item)">{{
        item.value
      }}</lay-button>
          </div>
        </div>
        <div class="keyboard-option">
          <div class="keyboard-option-item">
            <lay-button type="warm" @click="price_reduce_Window_Btn({ key: 'back' })">退格</lay-button>
          </div>
          <div class="keyboard-option-item">
            <lay-button type="danger" @click="price_reduce_Window_exit">退出</lay-button>
          </div>
          <div class="keyboard-option-item">
            <lay-button type="primary" @click="price_reduce_Window_go">确定</lay-button>
          </div>
        </div>
      </div>
    </div>
  </lay-layer>



</template>

<script setup>
import { layer } from "@layui/layui-vue";
import { ref, onMounted, computed, watch } from "vue";
import XEUtils from "xe-utils";
import window_pay_cash from "./windowPayCash.vue";//结算界面-现金处理键盘块
import { HTTP_homeOrderId, HTTP_homeOrderPriceReduce, HTTP_payQuery, HTTP_pay, HTTP_payRefund } from "@/apis/cashierApi";

const props = defineProps({
  order_db: {
    dbid: {
      type: String,
      default: "",//单号
      required: true
    },
    sign: {
      type: String,
      default: "",//改单签名串
      required: true
    }
  },
});


/** 当前操作的订单的支付数据包 */
const PAY_DB = ref({
  received: 0, //已收
  pendingPayment: 0, //待收
  total_price_new: 0, //应收[整单总价_实收价]
  total_price: 0, //整单总价_原始价
  price_reduce: "",//金额减免原因
  price_reduce_val: 0,//减免金额

  price_reduce_set: "",//新设置金额减免原因
  price_reduce_val_set: "",//新设置减免金额

  price_reduce_difference: null,//原始价与实收价的差
  total_discount: null,//整单折扣


});

//支付方式
const payMthods = ref([
  {
    id: 9,
    name: "现金",
    sign: "xj",
    icon: "xjzf",
    desc: "现金",
  },
  {
    id: 2,
    name: "支付宝",
    sign: "zfb",
    icon: "zfbzf",
    desc: "支付宝",
  },
  {
    id: 3,
    name: "微信",
    sign: "wx",
    icon: "wxzf",
    desc: "微信",
  },
  {
    id: 4,
    name: "银联",
    sign: "yl",
    icon: "xykzf",
    desc: "银联",
  },
  {
    id: 5,
    name: "储值卡",
    sign: "czk",
    icon: "czkzf",
    desc: "储值卡",
  },
  {
    id: 6,
    name: "购物券",
    sign: "gwq",
    icon: "gwqzf",
    desc: "",
  },
  {
    id: 8,
    name: "云支付",
    sign: "yzf",
    icon: "yzfzf",
    desc: "描述",
  },
]);

/** 已支付的支付列表 */
const PayOrderLi = ref([]);

//数字键盘
const btnList = ref([
  { key: 7, value: "7" },
  { key: 8, value: "8" },
  { key: 9, value: "9" },
  { key: 4, value: "4" },
  { key: 5, value: "5" },
  { key: 6, value: "6" },
  { key: 1, value: "1" },
  { key: 2, value: "2" },
  { key: 3, value: "3" },
  { key: 0, value: "0" },
  { key: ".", value: "." },
  { key: "clear", value: "清除" },
]);
//支付弹框
const payMethodLayer = ref(false);
//支付弹框标题
const payMethodTitle = ref(
  {
    name: "云支付",
    sign: "yzf",
    icon: "yzfzf",
    desc: "描述",
  },
);


//云支付弹窗-打开回调
const layer_pay_success = () => {
  console.log("打开回调", payMethodTitle.value);
  payAmount.value = PAY_DB.value.pendingPayment;//支付金额
  //结算类型
  if (payMethodTitle.value.sign != "yzf") {
    layer.open({
      type: "0",
      shadeClose: false,//遮盖层关闭
      // shadeOpacity: "0.8",//遮盖层透明度
      closeBtn: false,//关闭按钮
      title: false,//标题
      content: "无权限",
      beforeClose: (id) => {
        // console.log(`关闭前置:${id}`)
        payMethodLayer.value = false;
      },
    });
  } else {
    paymentCode_Ref.value.focus();//输入框对焦
  }


};
//云支付弹窗-关闭之前调用方法
const layer_pay_beforeClose = () => {
  console.log("关闭之前调用方法");
};

//云支付弹窗-退出按钮
const layer_pay_exit = () => {
  console.log("云支付弹窗-退出按钮");
  payMethodLayer.value = false;
};

//云支付弹窗-确定支付按钮
const layer_pay_pay = () => {
  console.log("云支付弹窗-确定支付按钮");
  yni_pay();
};


const payAmount = ref(""); //支付金额
const paymentCode = ref(""); //支付码

/** 云支付 */
const yni_pay = async () => {
  const payAmount_Number = XEUtils.toNumber(payAmount.value); //转数字
  // const payAmount_Float = XEUtils.commafy(XEUtils.floor(payAmount_Number, 2), { digits: 2, }); //转浮点数
  if (payAmount_Number <= 0 || payAmount_Number > XEUtils.toNumber(PAY_DB.value.pendingPayment)) {
    layer.msg("注意付款金额", { icon: 7 });
    return;
  }
  if (paymentCode.value.length < 10) {
    layer.msg("注意付款码", { icon: 7 });
    paymentCode_Ref.value.focus();//输入框对焦
    return;
  }
  const params = {
    dbid: props.order_db.dbid,//销售单号
    sign: props.order_db.sign,//签名串
    payway: 8, //支付方式_9现金8聚合支付
    total_amount: XEUtils.toString(payAmount_Number), //交易金额-转字符串
    dynamic_id: paymentCode.value,//支付码（支付宝或微信条码号-线上支付时必填）-现金支付时不验证
    // pay_currency: "", //支付币种-在线支付时不验证
    operator: "工号1001",//门店操作员
    remark: "支付备注-云支付",//备注
  };
  layer.load(0, { time: 1000 });
  console.log("云支付-确定点击-->", params);
  const res = await HTTP_pay(params);
  console.log("云支付HTTP回调", { res });

  if (res.code == 200) {
    home_Order_Id();//获取当前操作的销售单最新数据
    layer.open({
      type: "0",
      shadeClose: false,//遮盖层关闭
      title: "支付成功" + res.order_db.dbid,
      content: res.msg,
    });

  } else {
    layer.open({
      type: "0",
      shadeClose: false,//遮盖层关闭
      title: "支付失败",
      content: res,
    });

  }

  //跳到打印小票方法
  // pay_res("调用上级组件进行打印");
  // pay_res(res);
  // payAmountShowNULL();
  // if (  res.order_info.db.order_db.state=="B") {
  // } else {
  //     setRecMonentMonet(res.money.pendingPayment)
  // }
};

/** 查看单行支付信息弹窗显示 */
const PayID_Window = ref(false);
const PayID_Window_tab = ref("order_db");//选项卡激活id
// 选项卡切换
const PayID_Window_change = (id) => {
  console.log("选项卡切换", id);
};
/** 查看单行支付信息弹窗_清空退款金额 */
const Refund_db_amount_NULL = (e) => {
  console.log("查看单行支付信息弹窗_清空退款金额", e);
  Refund_db.value.amount = null;
};


/** 查看单行支付信息弹窗-表单提交按键组 */
const PayID_Window_db_btn = ref([

  {
    text: "离开",
    callback: () => {
      PayID_Window.value = !PayID_Window.value; //弹窗显示
    },
  },
]);


/** 查看单行支付信息弹窗内容 */
const PayID_Window_db = ref({
  id: "",
  client_sn: "",//流水单号_内唯一
  order_dbid: "",//对应订单数据编号
  pay_sn: "",//第三方支付系统返回的唯一单号_保密
  payway: "",//支付方式_9现金8线上支付
  state: "",//单据状态_ES异常状态A支付成功B1全额退款B2部分退款B3退款进行中
  total_amount: "",//原始交易实收金额
  net_amount: "",//在帐金额_实收金额减退款金额
  pay_currency: "",//支付币种_A1其它现金_B1其它电子支付_RMB人民币HKD港币USD美元_WXPAY微信ZFBPAY支付宝BDPAY百度钱包JDPAY京东钱包QQPAY_QQ钱包
  pay_currency_name: "",//支付币种_名称
  pay_currency_ico: "",//支付币种_图标
  time_new: "",//创建时间
  time_up: "",//更新时间
  x_del: "",//预删除1是0否
  pay_api_notify_query: "",//支付接口回调_查询回调
  pay_db: "",//商家扫用户支付接口回调
  exchange_rate: "",//汇率
  remark: "",//备注
  state_2: "状态中文",
});

/** 查看单个支付详情 */
const toPayID = async (item) => {
  // console.log("查看单个支付详情", item);
  PayID_Window.value = !PayID_Window.value;
  const res = await HTTP_payQuery({
    "dbid": item.order_dbid,//POS销售单号-唯一
    "client_sn": item.client_sn,//商户系统支付单号-唯一
  });
  console.log("查看单个支付详情-HTTP回调", res);
  if (res.code == 200) {
    console.log("查看单个支付详情-HTTP回调ddddddddddddddddddd", res.is_client_sn[0]);
    PayID_Window_db.value.id = res.is_client_sn[0].id ?? "";
    PayID_Window_db.value.order_dbid = res.is_client_sn[0].order_dbid ?? "";//订单编号
    PayID_Window_db.value.client_sn = res.is_client_sn[0].client_sn ?? "";//流水单号_内唯一
    PayID_Window_db.value.payway = res.is_client_sn[0].payway;//支付方式_9现金8线上支付
    PayID_Window_db.value.state = res.is_client_sn[0].state;//单据状态_ES异常状态A支付成功B1全额退款B2部分退款B3退款进行中
    PayID_Window_db.value.total_amount = res.is_client_sn[0].total_amount;//原始交易实收金额
    PayID_Window_db.value.net_amount = res.is_client_sn[0].net_amount;//在帐金额_实收金额减退款金额
    PayID_Window_db.value.pay_currency = res.is_client_sn[0].pay_currency;//支付币种_A1其它现金_B1其它电子支付_RMB人民币HKD港币USD美元_WXPAY微信ZFBPAY支付宝BDPAY百度钱包JDPAY京东钱包QQPAY_QQ钱包
    PayID_Window_db.value.pay_currency_name = res.is_client_sn[0].pay_currency_name;//支付币种_名称
    PayID_Window_db.value.pay_currency_ico = res.is_client_sn[0].pay_currency_ico;//支付币种_图标
    PayID_Window_db.value.time_new = res.is_client_sn[0].time_new;//创建时间
    PayID_Window_db.value.time_up = res.is_client_sn[0].time_up;//更新时间
    PayID_Window_db.value.x_del = res.is_client_sn[0].x_del;//预删除1是0否
    PayID_Window_db.value.exchange_rate = res.is_client_sn[0].exchange_rate;//汇率
    PayID_Window_db.value.remark = res.is_client_sn[0].remark;//备注
    PayID_Window_db.value.pay_api_notify_query = res.is_client_sn[0].pay_api_notify_query;//支付接口回调_查询回调
    PayID_Window_db.value.pay_db = res.is_client_sn[0].pay_db;//商家扫用户支付接口回调
    PayID_Window_db.value.pay_sn = res.is_client_sn[0].pay_sn;//第三方支付系统返回的唯一单号_保密
    PayID_Window_db.value.state_2 = res.is_client_sn[0].state_2;//格式化_状态
    PayID_Window_db.value.name = res.is_client_sn[0].pay_currency_name + "[" + res.is_client_sn[0].pay_currency + "]";//格式化_币种名称
    Refund_db.value.refund_sn = res.is_client_sn[0].pay_sn;//退款单号
    Refund_db.value.amount = res.is_client_sn[0].net_amount;//可退款金额
    Refund_db.value.refund_ty = 1;//退款方式_1单项退款2整单退款
  } else {
    layer.msg(res.msg, { icon: 5 });
  }
  // Refund_db_refund_sn_NULL();
};

/** 支付订单刷新按钮动画 */
const toPayLirefresh = (e, animClass) => {
  // toPayLi();//查看当前销售单的全部支付详情
  home_Order_Id();//获取当前操作的销售单最新数据
  const el = e.currentTarget;
  const targetClass = el.classList[1];
  if (!targetClass) {
    el.classList.add(animClass);
  } else {
    el.classList.remove(targetClass);
    setTimeout(() => {
      el.classList.add(targetClass);
    }, 100);
  }
};

/** 查看当前销售单的全部支付详情 */
const toPayLi = async () => {
  console.log("查看当前销售单的全部支付详情", props.order_db.dbid);
  // layer.load(0, { time: 1000 });
  const res = await HTTP_payQuery({
    dbid: props.order_db.dbid //POS销售单号-唯一
    // "client_sn": null,//商户系统支付单号-唯一
  });
  console.log("查看当前销售单的全部支付详情-HTTP回调", res);

  if (res.code == 200) {
    console.table("现金支付单_组", res.db.pay_db.pay_cash);
    console.table("线上支付单_组", res.db.pay_db.pay_online);
    // 支付方式列表
    let pay_cash = res.db.pay_db.pay_cash; //现金支付单
    let pay_online = res.db.pay_db.pay_online; //线上支付单
    PayOrderLi.value = [];//已支付的支付列表
    pay_cash.forEach((item, index) => {
      console.log("现金支付单_行", item);
      PayOrderLi.value.push({
        id: item.id,
        state: item.state,//单据状态_ES异常状态A支付成功B1全额退款B2部分退款B3退款进行中
        state_2: item.state_2,//单据状态_ES异常状态A支付成功B1全额退款B2部分退款B3退款进行中
        order_dbid: item.order_dbid,
        client_sn: item.client_sn,
        name: item.pay_currency_name,
        name2: item.pay_currency_name + "[" + item.pay_currency + "]",
        pay_currency: item.pay_currency,
        payway: item.payway,
        amount: item.net_amount,
        icon: item.pay_currency_ico,
        desc: "描述-现金支付单",
      });
    });
    pay_online.forEach((item, index) => {
      console.log("线上支付单_行", item);
      PayOrderLi.value.push({
        id: item.id,
        state: item.state,//单据状态_ES异常状态A支付成功B1全额退款B2部分退款B3退款进行中
        state_2: item.state_2,//单据状态_ES异常状态A支付成功B1全额退款B2部分退款B3退款进行中
        order_dbid: item.order_dbid,
        client_sn: item.client_sn,
        name: item.pay_currency_name,
        name2: item.pay_currency_name + "[" + item.pay_currency + "]",
        pay_currency: item.pay_currency,
        payway: item.payway,
        amount: item.net_amount,
        icon: item.pay_currency_ico,
        desc: "描述-线上支付单",
      });
    });

  } else {
    PayOrderLi.value = [];//已支付的支付列表
    layer.msg(res.msg, { icon: 5 });
  }

};

/** 退款弹窗_退款编号清空 */
const Refund_db_refund_sn_NULL = () => {
  Refund_db.value.refund_sn = null;
};

/** 退款弹窗显示 */
const pay_refund_Window = ref(false);
//退款弹窗_退出按钮
const pay_refund_Window_exit = () => {
  console.log("退款弹窗_退出按钮");
  // PAY_DB.value.price_reduce_val_set = "";
  pay_refund_Window.value = false;
  // home_Order_Id();//获取当前操作的销售单最新数据
};
//退款弹窗_确定按钮
const pay_refund_Window_go = () => {
  console.log("退款弹窗_确定按钮");

  toPayID_Refund();
  // PAY_DB.value.price_reduce_val_set = "";//新设置减免金额
  // price_reduce_Window.value = false;
  // home_Order_Id();//获取当前操作的销售单最新数据
};
//申请退款按钮
const pay_refund_go = (e) => {
  console.log("申请退款按钮", e);

  if (Refund_db.value.amount <= 0) {
    layer.msg("注意退款金额", { time: 2000, icon: 7 });
    return;
  }
  if (e == "8") {
    pay_refund_Window.value = !pay_refund_Window.value; //退款编号输入框弹窗显示
  } else {
    toPayID_Refund();
  }
};
/** 退款数据 */
const Refund_db = ref({
  refund_ty: 1, //退款方式_1单项退款2整单退款
  refund_sn: "退款单号", //退款单号
  amount: 0, //退款金额
  operator: "门店操作员",
});



/** 发起退款 */
const toPayID_Refund = async () => {
  console.log("发起退款");


  // 线上订单
  if (PayID_Window_db.value.payway == 8) {
    if (Refund_db.value.refund_sn == "") {
      layer.msg("注意：退款编号", { time: 2000, icon: 7 });
      return;
    }
  }
  const res = await HTTP_payRefund({
    dbid: PayID_Window_db.value.order_dbid, //POS销售单号-唯一
    client_sn: PayID_Window_db.value.client_sn, //商户系统支付单号-唯一
    refund_ty: Refund_db.value.refund_ty, //退款方式_1单项退款2整单退款
    refund_sn: Refund_db.value.refund_sn, //第三方支付系统单号--线上支付时必填
    amount: Refund_db.value.amount, //退款金额
    operator: Refund_db.value.operator, //门店操作员
  });
  console.log("发起退款-HTTP回调", res);

  if (res.code == 200) {
    home_Order_Id();
  } else {
    layer.msg(res.msg, { icon: 5 });
  }
};

const Ref_windowPayCash = ref(null)
const emit = defineEmits(["pay_res", "windowClose_0"]); //子父组件通讯
//调用上级组件
function pay_res(item) {
  console.log("支付后_向上级组件响应12345", item);
  home_Order_Id();//获取当前操作的销售单最新数据
  // toPayLi();//查看当前销售单的全部支付详情
  emit("pay_res", item);//调用上级组件
}



const windowClose = (res) => {
  emit("windowClose_0", res); //让上级组件弹窗关闭
};
//选择其他结算支付弹窗
const selectedPayMethod = (item) => {
  console.log("其他结算支付弹窗", item);
  if (item.sign == "xj") {
    return;
  }
  payMethodTitle.value = item;//结算类型
  payMethodLayer.value = true;

};


// 输入框对焦
const input_is = ref("paymentCode"); //输入框对焦
const paymentCode_Ref = ref();
const input_is_c = (e) => {
  console.log("输入框对焦->", e);
  input_is.value = e;
}
/** 云支付数字键盘事件 */
const layer_pay_Btn = (item) => {
  // console.log("云支付数字键盘事件 item-->", item);
  // console.log("云支付数字键盘事件 payAmount-->", payAmount.value);
  let num = "";
  // const payAmount = ref(""); //支付金额
  // const paymentCode = ref(""); //支付码
  if (input_is.value == "payAmount") {
    num = payAmount.value == "." ? "0." : XEUtils.toString(payAmount.value);
  } else if (input_is.value == "paymentCode") {
    num = paymentCode.value == "." ? "0." : XEUtils.toString(paymentCode.value);
  } else {
  }
  //删除一个数
  if (item.key === "back") {
    if (num.length > 0) {
      num = num.slice(0, -1);
    }
  } else if (item.key == ".") {
    // 只能有一个小数点
    if (num.indexOf(".") === -1) {
      num += ".";
    }
  } else if (item.key == "clear") {
    num = "";
  } else {
    //点击的数字
    num += item.value;
  }
  if (input_is.value == "payAmount") {
    if (num.indexOf(".") != -1) {
      num.split(".")[1].length > 2
        ? (num = num.slice(0, num.indexOf(".") + 3))
        : num;
    }
    payAmount.value = num;
    if (payAmount.value.includes(".") == false) {
      if (payAmount.value.length > 1) {
        payAmount.value = payAmount.value.replace(/^0+/, ""); //如果首位为0用正则删除
      }
    }
  } else if (input_is.value == "paymentCode") {
    if (num.includes(".")) {

    } else {
      paymentCode.value = num;
    }

  } else {
  }


};

/** 初始化页面数据 */
const initPage = async () => {
  console.log("初始化页面数据-获取当前操作的销售单", props.order_db);
  home_Order_Id();//获取当前操作的销售单最新数据
}




/** 获取当前操作的销售单最新数据 */
const home_Order_Id = async () => {
  const res = await HTTP_homeOrderId({
    dbid: props.order_db.dbid,//单号
  });
  console.log("获取当前操作的销售单最新数据-HTTP回调-->", res);
  if (res.code == 200) {
    /** 当前操作的订单的支付数据包 */
    PAY_DB.value.received = res.pay_db.total_price_new_received, //已收
      PAY_DB.value.pendingPayment = res.pay_db.total_price_new_pendingPayment, //待收
      PAY_DB.value.price_reduce = res.pay_db.price_reduce,//金额减免原因
      PAY_DB.value.price_reduce_val = res.pay_db.price_reduce_val,//减免金额
      PAY_DB.value.price_reduce_difference = res.pay_db.price_reduce_difference,//原始价与实收价的差
      PAY_DB.value.total_discount = res.pay_db.total_discount,//整单折扣
      PAY_DB.value.total_price = res.pay_db.total_price, //整单总价_原始价
      PAY_DB.value.total_price_new = res.pay_db.total_price_new, //整单总价_实收价
      Ref_windowPayCash?.value.setRecMonentMonet(PAY_DB.value.pendingPayment); // 调用子组件的方法
    toPayLi();//查看当前销售单的全部支付详情
  } else {
    layer.msg(res.msg, { icon: 5 });
  }
};

// 减免金额弹窗_显示
const price_reduce_Window = ref(false)
// 减免金额弹窗入口
const price_reduce_Window_c = async (e) => {
  // console.log("减免金额弹窗入口", e);
  price_reduce_Window.value = !price_reduce_Window.value
  PAY_DB.value.price_reduce_set = e;//新设置金额减免原因
  PAY_DB.value.price_reduce_val_set = "";//新设置减免金额
}

/** 减免金额弹窗_数字键盘事件 */
const price_reduce_Window_Btn = (item) => {
  console.log("减免金额弹窗_数字键盘事件-->", item);
  let num = "";
  num = PAY_DB.value.price_reduce_val_set == "." ? "0." : XEUtils.toString(PAY_DB.value.price_reduce_val_set);
  //删除一个数
  if (item.key === "back") {
    if (num.length > 0) {
      num = num.slice(0, -1);
    }
  } else if (item.key == ".") {
    // 只能有一个小数点
    if (num.indexOf(".") === -1) {
      num += ".";
    }
  } else if (item.key == "clear") {
    num = "";
  } else {
    //点击的数字
    num += item.value;
  }
  PAY_DB.value.price_reduce_val_set = num;//新设置减免金额
  if (PAY_DB.value.price_reduce_val_set.includes(".") == false) {
    if (PAY_DB.value.price_reduce_val_set.length > 1) {
      // console.log("没小数点且长度大于1,如果首位为0,用正则删除0");
      PAY_DB.value.price_reduce_val_set = PAY_DB.value.price_reduce_val_set.replace(/^0+/, ""); //如果首位为0用正则删除
    }
  }
};

//减免金额弹窗_退出按钮
const price_reduce_Window_exit = () => {
  // console.log("减免金额弹窗_退出按钮");
  PAY_DB.value.price_reduce_val_set = "";//新设置减免金额
  price_reduce_Window.value = false;
  home_Order_Id();//获取当前操作的销售单最新数据
};

//减免金额弹窗_确定按钮
const price_reduce_Window_go = () => {
  // console.log("减免金额弹窗_确定按钮", PAY_DB.value.price_reduce_val_set);

  let price_reduce_set = PAY_DB.value.price_reduce_set;//新设置金额减免原因
  let a = PAY_DB.value.price_reduce_val_set;//新设置减免金额
  if (a == "" || a == null || a == "." || a == "0." || a == "0.0") {
    layer.msg("注意金额", { icon: 7 });
    return;
  }
  let price_reduce_val_set = XEUtils.toNumber(a); //转数字
  homeOrderPriceReduce(price_reduce_set, price_reduce_val_set);//当前操作的销售单_减免金额操作
  PAY_DB.value.price_reduce_val_set = null;//新设置减免金额
  a, price_reduce_set, price_reduce_val_set = null;//

};

/** 当前操作的销售单_减免金额操作 */
const homeOrderPriceReduce = async (price_reduce_set, price_reduce_val_set) => {
  const params = {
    dbid: props.order_db.dbid,//销售单号
    sign: props.order_db.sign,//签名串
    price_reduce: price_reduce_set, //新设置金额减免原因
    price_reduce_val: price_reduce_val_set, //新设置减免金额
  };
  console.log("当前操作的销售单_减免金额操作-->", params);
  const res = await HTTP_homeOrderPriceReduce(params);
  console.log("当前操作的销售单_减免金额操作", res);
  if (res.code == 200) {
  } else {
    layer.msg(res.msg, { icon: 5 });
  }
  home_Order_Id();//获取当前操作的销售单最新数据
}

const pendingPaymentComp = computed(() => {
  // 计算属性
  const num = XEUtils.subtract(
    PAY_DB.value.total_price_new,
    PAY_DB.value.received
  );
  PAY_DB.value.pendingPayment = num;
  return num;
});

/** 数据变化监听 */
// watch(payAmount, (value) => {
//   console.log("数据变化监听-payAmount:", payAmount.value);
//   console.log("数据变化监听-value:", value);
// });

onMounted(() => {
  console.log("上级组件传入props:", props);
  initPage();//初始化页面数据
  // toPayLi();//查看当前销售单的全部支付详情
});
</script>


<style>
.layui-popper {
  z-index: 99999999999 !important;
}

i {
  color: #ff0000;
}
</style>
<style lang="less" scoped>
.t_settlement_main {
  padding: 5px;

  .t_main_header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;

    .layui-card {
      margin: 0;

      .t_main_header_item_icon {
        text-align: center;
      }
    }
  }

  .t_main_content {
    height: 450px;
    width: 100%;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .t_main_content_left {
      width: 240px;
      height: 100%;

      .left_header {
        height: 40px;
        width: 100%;
        background: #ffbca7;

        .layui-row {
          text-align: center;
          line-height: 40px;
        }
      }

      .left_content {
        height: calc(100% - 40px);
        width: 100%;
        overflow-y: auto;
        background: #eee;

        .layui-row {
          height: 32px;
          line-height: 32px;
          border-bottom: 1px solid #c7bdbd;

          .layui-col {
            display: flex;
            justify-content: left;
            align-items: center;
          }
        }
      }
    }

    .t_main_content_right {
      width: calc(100% - 248px);
      height: 100%;

      .right_header {
        width: 100%;
        height: 80px;
        background: #ffbca7;

        .layui-row {
          height: 50%;
          width: 100%;

          .layui-col {
            height: 100%;
            display: flex;
            align-items: center;

            .t_title {
              width: 74px;
              font-size: 20px;
              font-weight: 600;
              font-family: fangsong;

            }

            .t_content {
              box-sizing: border-box;
              padding-left: 6px;
              width: 120px;
              height: 26px;
              font-size: 24px;
              background: #eee;
              font-weight: 600;
            }
          }
        }
      }

      .t_button {
        padding-left: 6px;
      }



      .right_content {
        width: 100%;
        height: calc(100% - 80px);
        padding-top: 40px;
        box-sizing: border-box;
      }
    }
  }
}

.t_pay_main {
  width: 100%;
  height: 340px;

  .t_pay_main_header {
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: #f6f6f6;

    .layui-row {
      display: flex;
      justify-content: center;
      align-items: center;

      .layui-col {
        text-align: end;
      }

      .layui-col :deep(.layui-input .layui-input-wrapper input) {
        text-align: end;
        padding-right: 20px;
      }
    }
  }

  .t_pay_main_content {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    justify-content: space-around;

    .keyboard-num {
      width: 65%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;

      .keyboard-num-item {
        width: 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;

        button {
          width: 80px;
          height: 50px;
          background: #fff;
          border-radius: 10px;
        }
      }
    }

    .keyboard-option {
      width: 25%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;

      .keyboard-option-item {
        width: 100%;
        height: 50px;
        display: flex;

        button {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }

      .keyboard-option-item:last-child {
        height: 110px;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 3px;
  /* 控制横向滚动条的宽度 */
  height: 8px;
  /* 控制纵向滚动条的高度 */
}

::-webkit-scrollbar-thumb {
  background-color: #ffbca7;
  /* 滑块的颜色 */
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  /* 滚动条背景色 */
}
</style>
